import React, { Component } from 'react';
import './index.css';
import PubSub from 'pubsub-js';
export default class List extends Component {
  state = {
    userList: [],
    isFirst: true,
    isLoading: false,
    err: ''
  };
  componentDidMount() {
   this.token = PubSub.subscribe('updateState', (_, data) => {
      this.setState(data);
    });
  }
  render() {
    const { userList, isFirst, isLoading, err } = this.state;
    return (
      <div className="row">
        {isFirst ? (
          <h2>欢迎搜索</h2>
        ) : isLoading ? (
          <h2>正在加载中</h2>
        ) : err ? (
          <h2>{err}</h2>
        ) : userList.length ? (
          userList.map(user => {
            return (
              <div className="card" key={user.id}>
                <a rel="noreferrer" href={user.html_url} target="_blank">
                  <img alt="图" src={user.avatar_url} style={{ width: '100px' }} />
                </a>
                <p className="card-text">{user.login}</p>
              </div>
            );
          })
        ) : (
          <h2>暂无数据</h2>
        )}
      </div>
    );
  }
  componentWillUnmount() {
    PubSub.clearAllSubscriptions();
  }
}
